<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <base target="_frame"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CharMap - Powered by OpenType.js</title>
    <link href='css/index.css' rel='stylesheet' type='text/css'/>
    <script src="../../js/jquery.min.js" type="text/javascript"></script>
    <script src="js/opentype.min.js"></script>
    <script src="../../js/vscode.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div style="position:fixed;top:0;right:0;left:0;bottom:0;width:200px;background:#171D25;padding:20px;">
    <div style="position:absolute;bottom:0;left:0;right:0;height:60px;padding:0 20px;z-index:3;">
        <div style="font-size: 10px;color:#999;font-weight: 600;letter-spacing:1px;text-transform:uppercase;text-align:center;position:relative;line-height:60px;">
            Powered By OpenType.js
        </div>
    </div>
    <!-- <div style="position:absolute;top:0;left:0;right:0;height:40px;box-shadow:0 -1px 3px rgba(0,0,0,0.2);z-index:3;background:#171D25;padding:15px;">
        <div class="browse-wrap" style="position:relative;height:40px;border-radius:4px;">
            <div class="title" id="font-family" style="text-align:center;line-height:40px;">Select font</div>
            <input id="file" type="file" name="upload" class="upload" title="select font"/>
        </div>
    </div> -->
    <div style="position:absolute;top:0;left:0;right:0;bottom:40px;z-index:2;padding:15px;">
        <div class="nicescroll-left"
             style="overflow:auto;height:100%;overflow-x:hidden;border-radius:5px;border:1px solid rgba(255, 255, 255, 0.07);background: rgba(255, 255, 255, 0.02);">
            <div id="pagination"></div>
        </div>
    </div>
</div>
<div style="position:fixed;left:200px;width:475px;top:0;bottom:0;background:#1D242E;padding:20px;">
    <div style="position:absolute;top:20px;left:0;right:0;bottom:0;z-index:2;">
        <div class="nicescroll-center" style="overflow:auto;height:100%;overflow-x:hidden;padding:20px;padding-top:0;">
            <div style="font-size: 25px;margin-top:5px;color:#5B6971;font-weight: 100;letter-spacing:1px;text-align:left;margin-bottom:15px;">
                Font
            </div>
            <div id="font-data"></div>
            <div style="font-size: 25px;margin-top:10px;color:#5B6971;font-weight: 100;letter-spacing:1px;text-align:left;margin-bottom:20px;">
                Character <input id="copy-char"
                                 style="border:none;color:#14bfff;border-bottom:1px dotted rgba(255,255,255,0.5);background:transparent;font-size:15px;border-radius:2px;font-weight:600;position:relative;top:-4px;left:5px;width:30px;height:30px;text-align:center;outline:none;font-family:Arial;"/>
            </div>
            <div id="glyph-display" style="position:relative;">
                <canvas id="glyph-bg" width="420" height="310"></canvas>
                <canvas id="glyph" width="300" height="300"></canvas>
            </div>
            <div id="glyph-data"></div>
        </div>
    </div>
</div>
<div style="position:fixed;left:675px;right:0;top:0;bottom:0;background: #FFF;">
    <div style="position:absolute;top:0;left:0;right:0;height:80px;padding:20px;box-shadow:inset 0 -1px 0 #EEE;z-index:3;background:#FFF;">
        <div style="font-size: 25px;margin-top:5px;color:#BBB;font-weight: 100;letter-spacing:1px;text-align:left;">
            Glyphs
        </div>
    </div>
    <div style="position:absolute;top:80px;left:0;right:0;bottom:0;z-index:2;">
        <div class="nicescroll-right" style="overflow:auto;height:100%;overflow-x:hidden;">
            <div id="glyph-list-end"></div>
        </div>
    </div>
</div>
<div>
    <div id="message"></div>
</div>
</body>
</html>
